<template>
  <div>
    <el-row :gutter="10" style="z-index:200;margin-top:10px;background:white;">
      <el-col :xs="22" :lg="22" :offset="2">
        <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect" menu-trigger="hover">
          <el-submenu v-for="(item,index) in navbar" :key="index" :index="item.code">
            <template slot="title">{{item.name}}</template>
            <el-submenu
              v-for="(child,childindex) in item.children"
              :key="childindex"
              :index="child.titlecode+'|'+child.title"
            >
              <template slot="title">{{child.title}}</template>
              <el-menu-item
                v-for="(grand,grandindex) in child.children"
                :key="grand.code"
                :index="grand.code+'|'+grand.name"
              >{{grand.name}}</el-menu-item>
            </el-submenu>
          </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="z-index:200;margin-top:30px;background:white;">
      <el-col :xs="22" :lg="22" :offset="2">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item v-for="(item,index) in bread" :key="index" :to="{path:item.path}">
            <span>{{item.name}}</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
      <el-col :xs="22" :lg="22" :offset="2">
        <div style="margin:20px 0">
          <span
            v-for="(item,index) of judge"
            :key="index"
            :class="{active:item.active}"
            @click="handleActive(item)"
            style="margin-right:20px;cursor:pointer"
          >{{item.name}}</span>
        </div>
        <div style="margin:20px 0">
          <el-form :inline="true" :model="searchbox" class="form-inline" ref="searchbox">
            <el-form-item label="课评数 >" prop="commentNum">
              <el-input
                v-model="searchbox.commentNum"
                @change="handleNumber(searchbox.commentNum,'commentNum')"
                style="width:100px"
              ></el-input>
            </el-form-item>
            <el-form-item label="评分 >" prop="comScore">
              <el-input
                v-model="searchbox.comScore"
                @change="handleNumber(searchbox.comScore,'comScore')"
                style="width:100px"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                style="margin-right:20px;line-height:7px"
                type="warning"
                round
                @click="confirm"
              >确认</el-button>
              <el-button
                type="warning"
                round
                style="margin-right:20px;line-height:7px"
                @click="resetForm('searchbox')"
              >重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :xs="20" :lg="20" :offset="2" style="background:white;" v-if="search||vagesearch">
        <Cards
          :search="search"
          :grade="searchbox"
          ref="child"
          :bread="bread"
          :vagesearch="vagesearch"
        ></Cards>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Cards from "./Body/cards";
export default {
  name: "searchItem",
  data() {
    return {
      judge: [
        { active: true, name: "默认" },
        { active: false, name: "最多评论" },
        { active: false, name: "最多点赞" }
      ],
      bread: [
        {
          path: "/",
          name: "首页"
        }
      ],
      breads: "",
      searchbox: {
        commentNum: "",
        comScore: ""
      },
      navbar: [],
      search: "",
      commentNum: "",
      activeIndex: "",
      vagesearch: ""
    };
  },
  components: {
    Cards
  },
  methods: {
    handleSelect: function(key, keypath) {
      var temp = [];
      _(keypath).forEach((v, i, arr) => {
        if (v.includes("|")) {
          if (i == 1) {
            temp.push({
              title: v.split("|")[1],
              titlecode: v.split("|")[0]
            });
          } else if (i == 2) {
            temp.push({
              code: v.split("|")[0],
              name: v.split("|")[1]
            });
          }
        }
      });
      this.$router.push({
        name: "SearchItem",
        query: {
          child: JSON.stringify(temp[0]),
          grandchild: JSON.stringify(temp[1])
        },
        params: { navdata: this.$route.params.navdata }
      });
    },
    handleNumber: function(v, type) {
      let numberReg = /^[0-9]*$/;
      if (!numberReg.test(v)) {
        this.searchbox[type] = "";
      }
    },
    confirm: function() {
      this.$refs.child.addData();
    },
    resetForm: function(formn) {
      this.$refs[formn].resetFields();
      this.$refs.child.addData(1, 8);
    },
    handleActive: function(chose) {
      for (let item of this.judge) {
        if (chose.name == item.name) {
          item.active = true;
        } else {
          item.active = false;
        }
      }
    },
    handlebread: function() {
      this.navbar = this.$route.params.navdata;
      if (this.$route.query.grandchild) {
        this.bread = [
          {
            path: "/",
            name: "首页"
          }
        ];
        this.bread.push({
          path: `searchItem?name=${
            JSON.parse(this.$route.query.child).title
          }&code=${JSON.parse(this.$route.query.child).titlecode}`,
          name: JSON.parse(this.$route.query.child).title
        });
        this.bread.push({
          path: "searchItem/" + JSON.parse(this.$route.query.grandchild).code,
          name: JSON.parse(this.$route.query.grandchild).name
        });
        this.search = JSON.parse(this.$route.query.grandchild).code;
      } else if (this.$route.query.child) {
        this.bread = [
          {
            path: "/",
            name: "首页"
          }
        ];
        if (JSON.parse(this.$route.query.child).name) {
           this.bread.push({
            path: "searchItem/" + JSON.parse(this.$route.query.child).code,
            name: JSON.parse(this.$route.query.child).name
          });
          this.search = JSON.parse(this.$route.query.child).code;
          
          
        } else {
          this.bread.push({
            path: "searchItem/" + JSON.parse(this.$route.query.child).titlecode,
            name: JSON.parse(this.$route.query.child).title
          });
          try {
            this.search = JSON.parse(this.$route.query.child).code;
          } catch (e) {}
        }
      } else if (this.$route.query.searchresult || this.$route.query.name) {
        this.bread = [
          {
            path: "/",
            name: "首页"
          }
        ];
        if (this.$route.query.searchresult) {
          this.bread.push({
            path: `/SearchItem?name=${this.$route.query.searchresult}`,
            name: this.$route.query.searchresult
          });
          this.vagesearch = this.$route.query.searchresult;
        } else {
          this.bread.push({
            path: `/SearchItem?name=${this.$route.query.name}`,
            name: this.$route.query.name
          });
          this.vagesearch = this.$route.query.name;
        }
      } else {
        this.bread = [
          {
            path: "/",
            name: "首页"
          }
        ];
        this.bread.push({
          path: "searchItem/",
          name: this.$route.query.name
        });
        this.search = this.$route.query.code;
      }
    }
  },
  watch: {
    $route: {
      handler(val) {
        this.handlebread();
      },
      deep: true
    }
  },
  mounted() {
    this.handlebread();
  }
};
</script>

<style lang="less" scoped>
.active {
  font-weight: bold;
}
/deep/ .el-input__inner {
  // width: 90px;
  height: 30px;
  line-height: 30px;
}
</style>
